<template>
    <div class="list-footer">
        {{text}}
    </div>
</template>

<script>
export default {
    name: 'ListFooter',
    props: {
        /** 数量 */
        count: {
            type: Number,
        },
        /** 是否正在请求 */
        req: {
            type: Boolean,
        },
        /** 是否全部加载 */
        loaded: {
            type: Boolean,
        },
        /** 全部加载 */
        loadedText: {
            type: String,
            default: '没有更多了',
        },
        /** 全部加载，并且没有数据 */
        loadedEmptyText: {
            type: String,
            default: '没有更多了',
        },
    },
    computed: {
        text() {
            // 当前正在请求
            if (this.req) {
                return '加载中...';
            } else if (this.loaded) {
                // 全部加载完成
                if (this.count === 0) {
                    return this.loadedEmptyText;
                } else {
                    return this.loadedText;
                }
            }
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.list-footer {
    padding: 10px 0;
    .text-normal();
    color: #999999;
    text-align: center;
}
</style>